$(function () {
  initCapitalIncome = 1;
  initCapitalIncomeData();
});

//界面数据初始化
function initCapitalIncomeData() {
  //请求参数
  var obj = {
    budgetYear: fullYear,
    budgetMonth: fullMonth,
    dept: fullDepartment,
    status: 2,
    chartPage: "5010201",
  };
  //API
  ApiGet("getdata", obj, function (e) {
    var json = JSON.parse(e);
    var chartData = json.items[0].charts;

    setPanelData(chartData[0].data[0]);
    getMonPayComplete(chartData[1].data);
    getchartFieldPay(chartData[2].data);
    getDeptTopPay(chartData[3].data);
    setPanelMoney(chartData[4].data);
    getTypePayRate(chartData[4].data);
    getWlTopPay(chartData[5].data);
    getmonthDetail(chartData[6].data)
  });
}

//设置看板数据
function setPanelData(data) {
  var html = `<h3>
                    <span class="title">流入</span>
                </h3>
                <div class="number">
                    <div>
                        <h3>本年计划到款</h3>
                        <h4>(万元)</h4>
                        <h1>${FormatCash(data.key01)}</h1>
                    </div>
                    <div>
                        <h3>本年累计到款</h3>
                        <h4>(万元)</h4>
                        <h1>${FormatCash(data.key05)}</h1>
                    </div>
                </div>
               
                <div class="chart">
                <img
                    style="width:32px;height:20px;    position: absolute;
                    right: 28%;
                    top: -20px;"
                    src="assets/images/capital/arrow@2x.png" alt='箭头'>
                    <div class="item">
                        <span class="cashname">现金</span>
                        <span class="cash">${FormatCash(
                          data.key02
                        )}<b>万元</b></span>
                    </div>
                    <div class="item">
                        <span class="cashname">银行承兑汇票</span>
                        <span class="cash">${FormatCash(
                          data.key03
                        )}<b>万元</b></span>
                    </div>
                    <div class="item">
                        <span class="cashname">商业承兑汇票</span>
                        <span class="cash">${FormatCash(
                          data.key04
                        )}<b>万元</b></span>
                    </div>
                </div>`;

  $(".panel-income").html(html);
}

//月度到款执行
function getMonPayComplete(data) {
  let xData = [];
  let currYearTotal = [];
  let currYearBudget = [];
  let increase = [];
  let legendData = ["计划到款", "实际到款", "执行率"];

  for (var i = 0; i < data.length; i++) {
    xData.push(data[i].key01 + "月");
    currYearTotal.push((data[i].key02 / 10000).toFixed(0));
    currYearBudget.push((data[i].key03 / 10000).toFixed(0));
    increase.push((data[i].key04 * 100).toFixed(2));
  }

  let Data = [{
      name: "计划到款",
      type: "bar",
      barWidth: "25",
      barGap: 0,
      itemStyle: {
        color: "#165DFF",
      },
      data: currYearTotal,
    },
    {
      name: "实际到款",
      type: "bar",
      barWidth: "25",
      barGap: 0,
      itemStyle: {
        color: "#50CD89",
      },
      data: currYearBudget,
    },
    {
      name: "执行率",
      type: "line",
      barWidth: "13",
      barGap: 0,
      yAxisIndex: 1,
      itemStyle: {
        color: "#7239EA",
      },
      data: increase,
    },
  ];

  have("chartMonPay") ? mulitYBar("chartMonPay", xData, legendData, Data) : "";
}

// 各领域到款执行
function getchartFieldPay(data) {
  let xData = [];
  let currYearTotal = [];
  let currYearBudget = [];
  let increase = [];
  let legendData = ["计划到款", "实际到款", "执行率"];

  for (var i = 0; i < data.length; i++) {
    xData.push(data[i].key01);
    currYearTotal.push((data[i].key02 / 10000).toFixed(0));
    currYearBudget.push((data[i].key03 / 10000).toFixed(0));
    increase.push((data[i].key04 * 100).toFixed(2));
  }

  let Data = [{
      name: "计划到款",
      type: "bar",
      barWidth: "50",
      barGap: 0,
      itemStyle: {
        color: "#165DFF",
      },
      data: currYearTotal,
    },
    {
      name: "实际到款",
      type: "bar",
      barWidth: "50",
      barGap: 0,
      itemStyle: {
        color: "#50CD89",
      },
      data: currYearBudget,
    },
    {
      name: "执行率",
      type: "line",
      barWidth: "13",
      barGap: 0,
      yAxisIndex: 1,
      itemStyle: {
        color: "#7239EA",
      },
      data: increase,
    },
  ];
  have("chartFieldPay") ?
    mulitYBar("chartFieldPay", xData, legendData, Data) :
    "";
}

//部门到款TOP5
function getDeptTopPay(data) {
  let yData = [];
  let xData = [];
  let legendData = ["到款金额"];

  for (var i = 0; i < data.length; i++) {
    yData.push(data[i].key02);
    xData.push((data[i].key03 / 10000).toFixed(0));
    // xData.push(data[i].key03)
  }

  let Data = [{
    name: "到款金额",
    type: "bar",
    barWidth: "13",
    barGap: 0,
    itemStyle: {
      color: "#165DFF",
    },
    data: xData,
  }, ];
  have("chartDeptTop") ?
    horizontalBar("chartDeptTop", legendData, yData, Data, "万元") :
    "";
}

//往来金额
function setPanelMoney(data) {
  var html = "";
  for (var i = 0; i < data.length; i++) {
    html += `<div class="item">
                    <div class="wltype">
                        <span>${data[i].key01}</span>
                        <a href="unitdimension.html?id=${
                          data[i].key01
                        }"><span class="icon iconfont icon-arrow-right"></span></a>
                    </div>
                    <span>${(data[i].key02 / 10000)
                      .toFixed(2)
                      .toLocaleString()}<b>万元</b></span>
                </div>`;
  }

  $(".panelWl").html(html);
}

//各类型到款占比
function getTypePayRate(data) {
  let RateTotal = 0;
  let xData = [];
  let claimeddw = "万元";
  for (var i = 0; i < data.length; i++) {
    RateTotal += parseFloat(data[i].key02);
    xData.push({
      value: (data[i].key02 / 10000).toFixed(2),
      name: data[i].key01,
      percent: (data[i].key03 * 100).toFixed(2),
    });
  }

  let claimedRateData = [{
    name: "本年成本",
    type: "pie",
    left: "5%",
    radius: ["50%", "70%"],
    center: ["20%", "50%"],
    avoidLabelOverlap: true,
    itemStyle: {
      borderColor: "#fff",
      borderWidth: 4,
    },
    color: ["#165DFF", "#50CD89", "#FFC700", "#722ED1"],
    label: {
      show: false,
    },
    data: xData,
  }, ];
  have("chartTypePay") ?
    annulus(
      "chartTypePay",
      FormatCash(RateTotal),
      claimeddw,
      "",
      claimedRateData
    ) :
    "";
}

//往来单位TOP5
function getWlTopPay(data) {
  let yData = [];
  let xData = [];
  let legendData = ["到款金额"];

  for (var i = 0; i < data.length; i++) {
    yData.push(data[i].key01);
    xData.push((data[i].key02 / 10000).toFixed(0));
  }

  let Data = [{
    name: "到款金额",
    type: "bar",
    barWidth: "13",
    barGap: 0,
    itemStyle: {
      color: "#165DFF",
    },
    data: xData,
  }, ];
  have("chartWlTop") ?
    horizontalBar("chartWlTop", legendData, yData, Data, "万元") :
    "";
}
//鼠标hover展示全部
function extension(chart) {
  //判断是否创建过div框,如果创建过就不再创建了
  var id = document.getElementById("extension");

  if (!id) {
    var div = "<div id = 'extension' sytle=\"display:none\"></div>";
    $("html").append(div);
  }

  chart.on("mouseover", function (params) {
    if (params.componentType == "yAxis") {
      $("#extension")
        .css({
          position: "absolute",
          color: "#4E5969",
          border: "solid 2px #F7F8FA",
          "font-family": "Arial",
          "font-size": "18px",
          padding: "8px 5px",
          display: "inline",
          background: "#F4F7FC",
          "border-radius": "12px",
        })
        .text(params.value);

      $("html").mousemove(function (event) {
        var xx = event.pageX - 30;
        var yy = event.pageY + 20;
        $("#extension").css("top", yy).css("left", xx);
      });
    }
  });

  chart.on("mouseout", function (params) {
    if (params.componentType == "yAxis") {
      $("#extension").css("display", "none");
    }
  });
}

// 月度累计到款明细
function getmonthDetail(data) {
  let legendData = ['现金', '银行承兑汇票', '商业承兑汇票']
  let xianjin = [];
  let yinhang = [];
  let shangye = [];
  for (let i = 0; i < data.length; i++) {
    xianjin.push((data[i].key02 / 10000).toFixed(1))
    yinhang.push((data[i].key03 / 10000).toFixed(1))
    shangye.push((data[i].key04 / 10000).toFixed(1))
  }
  let leijirate = [{
      name: '现金',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#165DFF',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      type: 'line',
      lineStyle: {
        width: 2
      },
      data: xianjin
    },
    {
      name: '银行承兑汇票',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#14C9C9',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      lineStyle: {
        width: 2
      },
      type: 'line',
      data: yinhang
    },
    {
      name: '商业承兑汇票',
      smooth: false, //平滑曲线显示
      symbol: 'circle', //标记的图形为实心圆
      symbolSize: 8, //标记的大小
      itemStyle: {
        normal: {
          color: '#7239EA',
          borderColor: '#FFFFFF', //圆点透明 边框
          borderWidth: 2,
        },
      },
      showSymbol: false,
      lineStyle: {
        width: 2
      },
      type: 'line',
      data: shangye
    }
  ]

  have('monthDetail') ? lineChartMD('monthDetail', leijirate, legendData) : ''
}